﻿@page "/chart/scatter"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart'>Blazor Scatter Plot Chart</a> example compares the height and weight of the genders by using default scatter series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the scatter type chart. The scatter chart is used to plot data with two numeric parameters. You can use <code>Shape</code> property in the marker to change the scatter shape.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the scatter series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/scatter'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Height vs Weight" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Minimum="90" Maximum="220" Title="Height (in Inches)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20" Title="Weight (in Pounds)" RangePadding="ChartRangePadding.None">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Format="Weight:<b>${point.x} lbs</b> <br/> Height:<b>${point.y} inch</b>"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MaleInfo" Name="Male" XName="Height" Width="2" Opacity="0.6"
                         YName="Weight" Type="ChartSeriesType.Scatter">
                <ChartMarker Height="10" Width="10" Shape="ChartShape.Circle">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@FemaleInfo" Name="Female" XName="Height" Width="2" Opacity="0.6"
                         YName="Weight" Type="ChartSeriesType.Scatter">
                <ChartMarker Height="10" Width="10" Shape="ChartShape.Diamond">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }

    public List<ScatterChartData> MaleInfo { get; set; } = new List<ScatterChartData>
    {
        new ScatterChartData { Height = 101, Weight = 50},
        new ScatterChartData { Height = 102, Weight = 20},
        new ScatterChartData { Height = 103, Weight = 63},
        new ScatterChartData { Height = 104, Weight = 81},
        new ScatterChartData { Height = 105, Weight = 64},
        new ScatterChartData { Height = 106, Weight = 36},
        new ScatterChartData { Height = 107, Weight = 22},
        new ScatterChartData { Height = 108, Weight = 78},
        new ScatterChartData { Height = 109, Weight = 60},
        new ScatterChartData { Height = 130, Weight = 41},
        new ScatterChartData { Height = 131, Weight = 12},
        new ScatterChartData { Height = 132, Weight = 56},
        new ScatterChartData { Height = 133, Weight = 96},
        new ScatterChartData { Height = 134, Weight = 48},
        new ScatterChartData { Height = 135, Weight = 23},
        new ScatterChartData { Height = 136, Weight = 54},
        new ScatterChartData { Height = 137, Weight = 73},
        new ScatterChartData { Height = 138, Weight = 56},
        new ScatterChartData { Height = 139, Weight = 69},
        new ScatterChartData { Height = 150, Weight = 79 },
        new ScatterChartData { Height = 151, Weight = 18 },
        new ScatterChartData { Height = 152, Weight = 78 },
        new ScatterChartData { Height = 153, Weight = 92 },
        new ScatterChartData { Height = 154, Weight = 93 },
        new ScatterChartData { Height = 155, Weight = 29 },
        new ScatterChartData { Height = 156, Weight = 14 },
        new ScatterChartData { Height = 157, Weight = 85 },
        new ScatterChartData { Height = 158, Weight = 24 },
        new ScatterChartData { Height = 159, Weight = 11 },
        new ScatterChartData { Height = 170, Weight = 80 },
        new ScatterChartData { Height = 171, Weight = 14 },
        new ScatterChartData { Height = 172, Weight = 34 },
        new ScatterChartData { Height = 173, Weight = 81 },
        new ScatterChartData { Height = 174, Weight = 70 },
        new ScatterChartData { Height = 175, Weight = 80 },
        new ScatterChartData { Height = 176, Weight = 70 },
        new ScatterChartData { Height = 177, Weight = 32 },
        new ScatterChartData { Height = 178, Weight = 43 },
        new ScatterChartData { Height = 179, Weight = 21 },
        new ScatterChartData { Height = 190, Weight = 63 },
        new ScatterChartData { Height = 191, Weight = 9,},
        new ScatterChartData { Height = 192, Weight = 51 },
        new ScatterChartData { Height = 193, Weight = 25 },
        new ScatterChartData { Height = 194, Weight = 96 },
        new ScatterChartData { Height = 195, Weight = 32 },
        new ScatterChartData { Height = 196, Weight = 28 },
        new ScatterChartData { Height = 197, Weight = 35 },
        new ScatterChartData { Height = 198, Weight = 40 },
        new ScatterChartData { Height = 199, Weight = 43 }
    };

    public List<ScatterChartData> FemaleInfo { get; set; } = new List<ScatterChartData>
    {
        new ScatterChartData { Height = 121,  Weight = 23},
        new ScatterChartData { Height = 122,  Weight = 63},
        new ScatterChartData { Height = 123,  Weight = 83},
        new ScatterChartData { Height = 124,  Weight = 43},
        new ScatterChartData { Height = 125,  Weight = 8},
        new ScatterChartData { Height = 126,  Weight = 41},
        new ScatterChartData { Height = 127,  Weight = 56},
        new ScatterChartData { Height = 128,  Weight = 31},
        new ScatterChartData { Height = 129,  Weight = 29},
        new ScatterChartData { Height = 140,  Weight = 87},
        new ScatterChartData { Height = 141,  Weight = 43},
        new ScatterChartData { Height = 142,  Weight = 12},
        new ScatterChartData { Height = 143,  Weight = 38},
        new ScatterChartData { Height = 144,  Weight = 67},
        new ScatterChartData { Height = 145,  Weight = 49},
        new ScatterChartData { Height = 146,  Weight = 67},
        new ScatterChartData { Height = 147,  Weight = 83},
        new ScatterChartData { Height = 148,  Weight = 16},
        new ScatterChartData { Height = 149,  Weight = 89},
        new ScatterChartData { Height = 160,  Weight = 18 },
        new ScatterChartData { Height = 161,  Weight = 46 },
        new ScatterChartData { Height = 162,  Weight = 39 },
        new ScatterChartData { Height = 163,  Weight = 18 },
        new ScatterChartData { Height = 164,  Weight = 87 },
        new ScatterChartData { Height = 165,  Weight = 45 },
        new ScatterChartData { Height = 166,  Weight = 42 },
        new ScatterChartData { Height = 167,  Weight = 28 },
        new ScatterChartData { Height = 168,  Weight = 82 },
        new ScatterChartData { Height = 169,  Weight = 13 },
        new ScatterChartData { Height = 180,  Weight = 83 },
        new ScatterChartData { Height = 181,  Weight = 26 },
        new ScatterChartData { Height = 182,  Weight = 57 },
        new ScatterChartData { Height = 183,  Weight = 48 },
        new ScatterChartData { Height = 184,  Weight = 84 },
        new ScatterChartData { Height = 185,  Weight = 64 },
        new ScatterChartData { Height = 186,  Weight = 24 },
        new ScatterChartData { Height = 187,  Weight = 82 },
        new ScatterChartData { Height = 188,  Weight = 37 },
        new ScatterChartData { Height = 189,  Weight = 68 },
        new ScatterChartData { Height = 200,  Weight = 37 },
        new ScatterChartData { Height = 201,  Weight= 35 },
        new ScatterChartData { Height = 202,  Weight = 81 },
        new ScatterChartData { Height = 203,  Weight = 38 },
        new ScatterChartData { Height = 204,  Weight = 51 },
        new ScatterChartData { Height = 205,  Weight = 48 },
        new ScatterChartData { Height = 206,  Weight = 58 },
        new ScatterChartData { Height = 207,  Weight = 62 },
        new ScatterChartData { Height = 208,  Weight = 71 },
        new ScatterChartData { Height = 209,  Weight = 80 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class ScatterChartData
    {
        public double Height { get; set; }
        public double Weight { get; set; }
    }

}
